<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../js/vue.js"></script>
  <style>
    .box-one {

      margin: 0 auto;
      width: 250px;
      height: 250px;
      text-align: center;
      line-height: 250px;
      color: whitesmoke;
      font-weight: 700;
      border: solid 2px #000;
      background-color: tomato;

    }

    .active {

      box-shadow: 25px 25px 25px gold;

    }

    .background {

      background-color: blueviolet;
    }

    .color {

      color: yellowgreen;
    }


  </style>
</head>

<body>
  <div id="app">


    <!--

        关键问题：什么时候使用动态类？
        推荐：当类名是通过数据来控制是否添加的时候，才会使用动态类


        零件1：动态类只有一个类时的处理方式
       
        方式1：直接在data里，用className表达即可，当数据出现时，就自动添加上了

        方式2：使用三元运算表达式，并返回一个字符串即可，由一个开关控制它是否添加类名(exp: 它也可以使用零件2的方式添加类)

        -->




    <div class="box-one" :class="isHover?'active': null">零件一</div>

    <div class="box-one" :class="className">零件一</div>

    <!-- 

        零件2：当动态类的类有一个或者多个但数量是固定时的处理方式

        处理方式：我们可以给动态类设置一个对象，每一个动态类的类名都是对象的key,值是一个布尔值(小心隐式类型转换)代表是否开启当前的类。（假设：由于对象的key本质上为一个字符串，而值可以作为开关进行控制，所以可以完成上述操作）
     

       -->

    <div class="box-one" :class="{ 

      active:isActive, 
      background: isBackground,
      color: isColor,  

    }"> 零件二 </div>

    <!-- 

      零件3：当动态类的类有一个或者多个但数量不固定时的处理方式

      处理方式：使用数组，数组中的项是写死的，无法通过布尔值控制开关，但是可以通过控制数组元素的添加与删除来模拟开关效果

      思考一下：为什么在这里使用数组而不使用对象呢？
            答：因为在vue的详细原理中，是不允许随便给对象添加属性的，给对象添加时，是没有响应式的即视图无法响应，但数组可以随时添加item

     -->


    <div class="box-one" :class="arrClass">零件三</div>



    <!-- 注：零件1与零件2的使用情况较多，零件3使用情况较少 -->

  </div>
</body>
<script>

  Vue.config.productionTip = false;

  const vm = new Vue({
    el: "#app",
    data() {
      return {
        isHover: true,
        className: "active",
        isActive: true,
        isBackground: true,
        isColor: true,
        arrClass:['active','background','color'],
      };
    },
  });
</script>


</html>